<template>
    <div class="demo-card-square mdl-card mdl-shadow--2dp animate__animated animate__fadeIn">
        <!-- Colored FAB button with ripple -->
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
            @click="switchToAddComm">
            <i class="material-icons">add</i>
        </button>
    </div>
</template>

<script>
import 'animate.css';
export default {
    setup() {
        return {}
    },
    props: [
        "switchToAddComm"
    ],
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.demo-card-square.mdl-card {
    width: 240px;
    height: 320px;
    color: #fff;
    // background:
    //     url('../assets/img/shop.jpg') bottom right 50% no-repeat #46B6AC;
    background-size: 480px;
}

.demo-card-square>.mdl-card__title {
    color: #fff;
    background:
        url('../assets/img/shop.jpg') bottom right 50% no-repeat #46B6AC;
    background-size: 480px;
}
</style>